<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.memberName" clearable class="filter-item" style="width: 200px;" placeholder="请输入学生名称" />
      <el-input v-model="listQuery.cellphone" clearable class="filter-item" style="width: 200px;" placeholder="请输入学生手机号" />
      <el-select v-model="listQuery.storeId" placeholder="请选择门店" class="filter-item" clearable @change="selectStore">
        <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
      </el-select>
      <el-select
        v-model="listQuery.classId"
        :disabled="!listQuery.storeId"
        placeholder="请选择班级"
        class="filter-item"
        clearable>
        <el-option v-for="item in classOptions" :key="item.classId" :label="item.className" :value="item.classId" />
      </el-select>
      <el-select v-model="listQuery.sort" placeholder="排序类型" class="filter-item" clearable>
        <el-option v-for="item in Options1" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="listQuery.direction" placeholder="默认排序" class="filter-item" clearable>
        <el-option v-for="item in Options2" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="onAdd">添加学生</el-button>
      <el-button class="filter-item" type="success" @click="handleDownload">导出表格</el-button>
      <el-button class="filter-item" type="warning" @click="restList">重置</el-button>
      <!-- <el-button :disabled="multipleSelection.length===0" class="filter-item" type="danger" icon="el-icon-delete" @click="handleDeleteAll">批量删除</el-button> -->
    </div>
    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column align="center" width="100px" label="ID" prop="id" />
      <el-table-column align="center" label="学生姓名" prop="memberName" />
      <el-table-column align="center" label="手机号码" prop="cellphone" />
      <el-table-column align="center" label="性别">
        <template slot-scope="scope">
          <el-tag>{{ genderDic[scope.row.sex] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建门店" prop="storeName" />
      <el-table-column align="center" label="剩余课次" prop="remainingCount" />
      <el-table-column align="center" label="课程效期" prop="classTimeExpireDate" />
      <el-table-column align="center" label="所属班级" prop="className" />
      <el-table-column align="center" label="创建时间" prop="created" />
      <el-table-column align="center" label="操作" width="350">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="manageMember(scope.row.id)">课次管理</el-button>
          <el-button type="primary" size="mini" @click="delMemberTimes(scope.row.id)">扣课</el-button>
          <el-button type="primary" size="mini" @click="editMember(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteMember(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getList" />
  </div>
</template>

<script>
import {
  getClassLsit
} from '@/api/class'
import {
  fetchList,
  deleteMember,
  delMemberTimes,
  downloadFile
} from '@/api/user'
import {
  getStoreLsit
} from '@/api/store/store'
import Pagination from '@/components/Pagination'
import lodash from 'lodash'
export default {
  name: 'User',
  components: {
    Pagination
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        index: 0,
        size: 10,
        storeId: null,
        classId: '',
        memberName: undefined,
        cellphone: null,
        direction: '',
        sort: ''
      },
      storeOptions: [],
      classOptions: [],
      Options1: [{
        label: '课次排序',
        value: 'remainingCount'
      }, {
        label: '有效期排序',
        value: 'classTimeExpireDate'
      }],
      Options2: [{
        label: '升序',
        value: 'asc'
      }, {
        label: '降序',
        value: 'desc'
      }],
      downloadLoading: false,
      genderDic: ['未知', '男', '女'],
      multipleSelection: []
    }
  },
  created() {
    this.getStoreLsit()
    if (this.$route.params.storeId) {
      this.listQuery.storeId = this.$route.params.storeId
      this.listQuery.classId = this.$route.params.classId
      this.getClassLsit({
        storeId: this.$route.params.storeId,
        index: 0,
        size: 100
      })
    }
    this.getList()
  },
  methods: {
    getStoreLsit() {
      const params = {
        index: 0,
        size: 100,
        storeName: undefined
      }
      getStoreLsit(params).then(res => {
        this.storeOptions = res.data.data.content
      })
    },
    getList(e) {
      if (e && e.page) {
        this.listQuery.index = e.page - 1
      }
      this.listLoading = true
      fetchList(this.listQuery)
        .then(response => {
          this.list = response.data.data.content
          this.total = response.data.data.totalRecords
          this.listQuery.index = response.data.data.currentPage
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.index = 0
      this.listQuery.page = 1
      this.getList()
    },
    deleteMember(id) {
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = {
            idList: [id]
          }
          deleteMember(params).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editMember(row) {
      this.$router.push({
        path: '/user/editUser',
        query: {
          id: row.id
        }
      })
    },
    onAdd() {
      this.$router.push({
        path: '/user/addUser'
      })
    },
    manageMember(memberId) {
      this.$router.push({
        path: '/user/manageUser',
        query: {
          memberId: memberId
        }
      })
    },
    delMemberTimes: lodash.throttle(function(memberId) {
      this.$confirm('是否继续扣课?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delMemberTimes({
            memberId: memberId
          }).then(res => {
            this.$message({
              message: '扣课成功',
              type: 'success'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }, 3000),
    getClassLsit(data) {
      getClassLsit(data).then(response => {
        this.classOptions = response.data.data.content
      })
    },
    selectStore(v) {
      this.classOptions = []
      this.listQuery.classId = ''
      this.getClassLsit({
        storeId: v,
        index: 0,
        size: 100
      })
    },
    restList() {
      this.listQuery = {
        index: 0,
        size: 10,
        storeId: null,
        classId: '',
        memberName: undefined,
        cellphone: null,
        direction: '',
        sort: ''
      },
      this.handleFilter()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleDeleteAll() {
      const idList = []
      this.multipleSelection.forEach(item => {
        idList.push(item.id)
      })
      deleteMember({
        idList
      }).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      })
    },
    handleDownload() {
      this.downloadLoading = true
      downloadFile(this.listQuery).then(res => {
        const content = res.data
        const blob = new Blob([content], {
          type: 'application/vnd.ms-excel;charset=utf-8'
        })
        var date =
      new Date().getFullYear() +
      '' +
      (new Date().getMonth() + 1) +
      '' +
      new Date().getDate() +
      '' +
      new Date().getHours() +
      '' +
      new Date().getMinutes() +
      '' +
      new Date().getSeconds() +
      '' +
      new Date().getMilliseconds()
        const fileName = date + '.' + 'xlsx'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }
  }
}
</script>
